<template>
	<m-layout title="记录" gap="30">
		<template v-for="(item, index) in listArr">
			<m-block gap="0 24" spa="0 0 20">
				<view class="li">
					<view class="head flex-between border-bottom pb-12">
						<text class="fs26 fw-600">{{ item.ctime.replace('T', ' ') }}</text>
						<text v-if="Number(item.state) == 2 || Number(item.state) == 3" class="text-red">{{ stateEun[item.state] }}</text>
						<text v-else>{{ stateEun[item.state] }}</text>
					</view>
					<view class="flex-between ai-baseline ptb-4 mt-12">
						<text style="white-space: nowrap">兑换数量：</text>
						<view class="flex fw-600">
							<text>{{ item.amtFrom }}</text>
							<text class="ml-4">{{ coinConfig[coinid]['coinname'] }}</text>
						</view>
					</view>
					<view class="flex-between ai-baseline ptb-4 mb-12">
						<text style="white-space: nowrap">获得数量：</text>
						<view class="flex fw-600">
							<text>{{ item.amtTo }}</text>
							<text class="ml-4">USDT</text>
						</view>
					</view>
					<view class="flex-column fs24">
						<view class="flex-column pro1 mb-8" v-if="[0, 6].includes(Number(userinfo.dls))">
							<view class="flex-between">
								<view class="flex">
									<text>营业厅审核状态：</text>
									<text v-if="item.pro1 == 0" class="text-red">待审核</text>
									<text v-if="item.pro1 == 1" class="text-grey">已审核</text>
									<text v-if="item.pro1 == 2" class="text-grey">已驳回</text>
								</view>
							</view>
							<view class="flex-between" v-if="item.pro1 !== 0">
								<text>审核时间：</text>
								<text>{{ item.proTime1.replace('T', ' ') }}</text>
							</view>
						</view>
					<!-- 	<view class="flex-column pro1 mb-8" v-if="[0, 6, 5].includes(Number(userinfo.dls))">
							<view class="flex-between">
								<view class="flex">
									<text>区县公司审核状态：</text>
									<text v-if="item.pro2 == 0" class="text-red">待审核</text>
									<text v-if="item.pro2 == 1" class="text-grey">已审核</text>
									<text v-if="item.pro2 == 2" class="text-grey">已驳回</text>
								</view>
							</view>
							<view class="flex-between" v-if="item.pro2 !== 0">
								<text>审核时间：</text>
								<text>{{ item.proTime2.replace('T', ' ') }}</text>
							</view>
						</view> -->
						<view class="flex-column pro1 mb-8">
							<view class="flex-between">
								<view class="flex">
									<text>平台审核状态：</text>
									<text v-if="item.pro3 == 0" class="text-red">待审核</text>
									<text v-if="item.pro3 == 1" class="text-grey">已审核</text>
									<text v-if="item.pro3 == 2" class="text-grey">已驳回</text>
								</view>
							</view>
							<view class="flex-between" v-if="item.pro3 !== 0">
								<text>审核时间：</text>
								<text>{{ item.proTime3.replace('T', ' ') }}</text>
							</view>
						</view>
						<view class="flex-between ai-baseline" v-if="item.remark">
							<text style="white-space: nowrap">驳回理由：</text>
							<text class="otp2">{{ item.remark }}</text>
						</view>
					</view>
				</view>
			</m-block>
		</template>
		<m-loading :list="listArr" :index="pageIndex" :total="pageCount" :loading="isLoading" />
	</m-layout>
</template>

<script>
import { mapState } from 'vuex';
import { ExchangePage } from '@/api/Activetion.js';
export default {
	data() {
		return {
			coinidFrom: 4,
			coinidTo: 3,
			listArr: [],
			pageIndex: 1,
			pageSize: 10,
			pageCount: 1,
			isLoading: false,
			coinid: 4,
			stateEun: {
				1: '已完成',
				2: '待审核',
				3: '待处理',
				4: '驳回'
			}
		};
	},
	computed: {
		...mapState({
			userinfo: (state) => state.user.userinfo,
			coinConfig: (state) => state.general.coinConfig
		})
	},
	onLoad({ coinidFrom, coinidTo }) {
		this.coinidFrom = coinidFrom || '1';
		this.coinidTo = coinidTo || '1';
		console.log('this.coinidFrom',this.coinidFrom)
		console.log('this.coinidTo',this.coinidTo)
		this.getData();
	},
	methods: {
		// 初始化
		reset() {
			this.pageCount = 1;
			this.pageIndex = 1;
			this.getData();
		},
		// 获取转让记录列表
		async getData() {
			if (this.pageIndex > this.pageCount) {
				return;
			}
			this.isLoading = true;
			const { list, pageCount, success } = await ExchangePage({
				coinid_from: Number(this.coinidFrom),
				coinid_to: Number(this.coinidTo),
				pageSize: this.pageSize,
				pageIndex: this.pageIndex
			});
			this.isLoading = false;
			this.pageCount = pageCount;
			if (this.pageIndex <= 1) {
				this.listArr = list;
			} else {
				this.listArr = [...this.listArr, ...list];
			}
			this.pageIndex++;
			uni.stopPullDownRefresh();
		}
	},
	onPullDownRefresh() {
		this.reset();
	},
	onReachBottom() {
		this.getData();
		console.log('触底了');
	}
};
</script>

<style lang="scss">
.li {
	padding: 27rpx 0;

	view + view {
		padding-top: 8rpx;
	}

	.head {
		text:nth-of-type(1) {
			font-size: 30rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		text:nth-of-type(2) {
			font-size: 22rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}

	text {
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
}

.li + .li {
	border-top: 1px solid #eeeeee;
}
.pro1 {
	padding: 20rpx;
	border-radius: 12rpx;
	background: #eeeeee;
	font-size: 24rpx;
}
</style>
